<script setup lang="ts">
import { useRouter } from 'vue-router';
import { reactive, ref, watch, computed, effect } from 'vue';

const router = useRouter();

const pics = ref([
  {
    id: 1,
    img: '/插画/智能终端1.svg',
    title: '智能终端 通三端',
    content: ['PC  端', '移 动 端', '小 程 序'],
  },
  {
    id: 2,
    img: '/插画/视频讲解.svg',
    title: '视频讲解',
    content: ['知识点概览', '核心知识分享'],
  },
  {
    id: 3,
    img: '/插画/学习报告.svg',
    title: '三秒出报告',
    content: ['学习情况总结', '成绩报告详情', '阶段性学习成果'],
  },
]);
</script>

<template>
  <div class="container">
    <header>智慧学习平台简介</header>
    <div class="item" v-for="item in pics">
      <img :src="item.img" alt="" />
      <div class="introduce">
        <h2>{{ item.title }}</h2>
        <div>
          <p v-for="i in item.content">{{ i }}</p>
        </div>
        <button class="button">查看全部</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
header {
  margin: 100px 0 0 0;
  text-align: center;
}

.item {
  margin: 100px 0;
  @include flex(center);

  img {
    margin-right: 60px;
    width: 300px;
    // height: 200px;
  }

  .introduce {
    @include flex-column($ai: flex-start);

    p {
      font-size: 14px;
      color: #7a7e90;
    }

    button {
      width: 100px;
      border-radius: 0;
      height: 40px;
      position: relative;
      z-index: 1;
      transition: all 250ms;
      overflow: hidden;
    }
  }
}

.item:nth-child(3) {
  flex-direction: row-reverse;

  img {
    margin-left: 60px;
  }
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: #41b883;
  // background-color: #31a8ff;
  z-index: -1;
  transition: all 250ms;
}

button:hover::before {
  width: 100%;
}
</style>
